<template>
  <!-- <div class="index shang-bing"> -->
  <el-form :inline="true" label-width="100px" :model="formInline" class="demo-form-inline">
    <el-form-item label="筛选用户">
      <el-select v-model="formInline.region" placeholder="全部">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="筛选事由">
      <el-select v-model="formInline.region" placeholder="全部">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="筛选伤病部位">
      <el-select v-model="formInline.region" placeholder="全部">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="日期" class="data">
      <el-date-picker el-date-pickerv-model="value1" type="date" placeholder="选择日期"></el-date-picker>
    </el-form-item>
    <el-row class="btn">
      <el-button type="primary" class="icon-cire">查询</el-button>
    </el-row>
    <div class="icon">
      <!-- <span class="icon-cire"> </span> -->
      <el-button type="primary" class="newill" @click="harderClick">
        <i class="el-icon-plus"></i>
        <span>新增伤员</span>
      </el-button>
      <div>
        <el-dialog title="新增伤员" :visible.sync="open" width="1000px" append-to-body>
          <!-- :rules 这个只有你需要对form规则校验的时候 才加 其余的 你可以不加 -->
           <el-form ref="form" :model="formInline" label-width="100px">
              <el-row>
                <el-col :span="8">
                      <el-form-item label="队医选择">
                        <el-select v-model="formInline.region" placeholder="代号1">
                        <el-option label="代号2" value="shanghai"></el-option>
                        <el-option label="代号3" value="beijing"></el-option>
                        </el-select>
                      </el-form-item>
                </el-col>
                <el-col :span="8">
                      <el-form-item label="伤病部位">
                        <el-select v-model="formInline.region" placeholder="上肢">
                        <el-option label="下肢" value="shanghai"></el-option>
                        <el-option label="躯干" value="beijing"></el-option>
                        </el-select>
                     </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="受伤事由">
                        <el-select v-model="formInline.region" placeholder="受伤">
                        <el-option label="生病" value="shanghai"></el-option>
                        <el-option label="过敏" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                      <el-form-item label="筛选伤病部位">
                        <el-select v-model="formInline.region" placeholder="上肢">
                        <el-option label="下肢" value="shanghai"></el-option>
                        <el-option label="躯干" value="beijing"></el-option>
                        </el-select>
                     </el-form-item>
                </el-col>
                <el-col :span="8" class="col-shang">
                      <el-form-item label="队医选择">
                        <el-select v-model="formInline.region" placeholder="上肢">
                        <el-option label="下肢" value="shanghai"></el-option>
                        <el-option label="躯干" value="beijing"></el-option>
                        </el-select>
                     </el-form-item>
                </el-col>
              </el-row>
           </el-form>
           <el-form :inline="true" label-width="100px" class="demo-form-inline">
            <el-form-item label="治疗方法"> 
                 <el-input
                  type="textarea"
                  :rows="5"
                  placeholder="请输入内容"
                  v-model="textarea">
                </el-input> 
             </el-form-item> 
           </el-form>
           <el-form :inline="true" label-width="100px" class="demo-form-inline">
             <el-form-item label="上传伤病报告"> 
                <el-upload
                  action="https://jsonplaceholder.typicode.com/posts/"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
             </el-form-item>
           </el-form>
           <el-form :inline="true" label-width="100px" :model="formInline" class="demo-form-inline">
              <el-form-item label="建议治疗日期" class="data"> 
                <span class="span" style="font-size:14px;color: #606266;">2020年2月21日  (7天)</span>
              </el-form-item>
           </el-form>
           <el-row style="text-align: center;">
             <el-button type="primary" class="button1">返回</el-button>
             <el-button type="primary" class="button2">保存</el-button>
         </el-row>
        </el-dialog>
      </div>
    </div>
  </el-form>
  <!-- </div> -->
</template>
<script>
export default {
  data() {
    return {
      open: false,
      textarea:'',
       dialogImageUrl: '',
        dialogVisible: false,
      formInline: {
        user: "",
        region: "",
        
      },
      value1: "",

      tableData: [
        {
          name: 1,
        },
      ],
    };
  },
  mounted() {},
  methods:{
   
    harderClick(){
      this.open = true;
    },handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
  }
};
</script>


<style scoped>
/* 你自己定义的class 要写在 style scope下面 */
.index {
  height: 100%;
}
.data {
  display: inline-block;
  margin-right: 33px;
  vertical-align: top;
}
.btn {
  display: inline-block;
}
.icon {
  display: inline-block;
  margin-left: 35px;
}
.icon .icon-cire {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background: #fff;
}

.charts-box {
  width: 100%;
  overflow: hidden;
}
#chartLineBox {
  overflow: hidden;
  margin-top: 66px;
}
.icon .newill {
  padding: 7px 15px;
  font-size: 12px;
  /* border-radius: 3px; */
}
.col-shang{
  width:33.5%;
}
.el-row .button1{
    margin-left: 40px;

  }
  .el-row .button2{
    margin-left: 46px;
  }
</style>
<style>
/* 要修改element自带的样式  就在这写  没有scope中写  一定要指明哪一个下面的按钮等 的样式  不要像下面的这样写
不然的话   会修改所以的 样式
 */
.shang-bing .icon-cire {
  padding: 12px 32px;
}
.el-textarea__inner {
    width: 519px;
    height: 200px;
}

</style>